<template>
  <div class="rolelist">
    <el-card>
      <p style="width:100px;height:50px;line-height:30px">
        <el-button type="primary">添加角色</el-button>
      </p>
      <el-table row-key="id" :data="rolelist" border>
        <el-table-column type="expand"></el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" icon="el-icon-delete"
              >删除</el-button
            >
            <el-button size="mini" type="warning" icon="el-icon-setting"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="分配权限" :visible.sync="show" width="50%" @close="close">
      <el-tree
        :data="rightlist"
        :props="treeProps"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="keys"
        ref="treeRef"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="allotRights">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "rolelist",
  data() {
    return {
      rightlist: [],
      rolelist: [],
      show: false,
      treeProps: {
        label: "authName",
        children: "children"
      },
      keys: [],
      roleid: ""
    };
  },
  created() {
    this.getrightlist();
    this.getrolelist();
  },
  methods: {
    async getrightlist() {
      const { data: res } = await this.$axios.get("/rights/list");
      //   if (res.meta.status !== 200)
      //     return this.$message.error("获取权限列表失败");
      this.rightlist = res.data;
    },
    async getrolelist() {
      const { data: res } = await this.$axios.get("/roles");
      // if (res.meta.status !== 200)
      //     return this.$message.error('获取角色列表失败')
      this.rolelist = res.data;
      console.log(res.data);
      this.rolelist = res.data;
    },
    async getrolelist() {
      const { data: res } = await this.$axios.get("roles");
      // if (res.meta.status !== 200)
      // return this.$message.error("获取角色列表失败");
      // this.rolelist = res.data
      console.log(res.data);
      this.rolelist = res.data;
    },
    async remove(role, rightid) {
      const confirmResult = await this.$confirm(
        "请问是否要删除该权限",
        "删除提示",
        {
          confirmButtonText: "确认删除",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已经取消删除");
      }

      const { data: res } = await this.$http.delete(
        `roles/${role.id}/rights/${rightid}`
      );
      // if (res.meta.status !== 200)
      //   return this.$message.error("删除角色权限失败");

      role.children = res.data;
      this.getrolelist();
    },
    async showdialog(role) {
      this.roleid = role.id;
      const { data: res } = await this.$http.get("rights/tree");
      // if (res.meta.status !== 200) return this.$message.error("获取权限树失败");
      this.rightlist = res.data;

      this.getkeys(role, this.keys);
      this.show = true;
      console.log(this.keys);
    },
    getkeys(node, arr) {
      if (!node.children) {
        return arr.push(node.id);
      }
      node.children.forEach(item => this.getkeys(item, arr));
    },
    close() {
      this.keys = [];
    },
    async allotRights() {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ];
      const idlist = keys.join(",");

      const { data: res } = await this.$axios.post(
        `roles/${this.roleid}/rights`,
        {
          rids: idlist
        }
      );
      // if (res.meta.status !== 200) return this.$message.error("分配权限失败");

      this.$message.success("分配权限成功");
      this.getrolelist();
      this.show = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.rolelist {
  width: 100%;
}
</style>